<template>
  <div id="tradingRecord">
    <div class="title1">
      <img src="../../assets/img/jiaoyijilu.png" alt />
      <div>
        <p>交易记录</p>
        <p>当前系统支持查询最近30日的交易记录</p>
      </div>
    </div>
    <div class="timer">
      <div class="time-left">
        <span>日期</span>
        <el-date-picker
          size="small"
          v-model="time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        ></el-date-picker>
        <el-button-group style="margin:0 10px">
          <el-button @click.native="dataSearch(1)" size="small" plain>今日</el-button>
          <el-button @click.native="dataSearch(2)" size="small" plain>昨日</el-button>
          <el-button @click.native="dataSearch(7)" size="small" plain>近七日</el-button>
          <el-button @click.native="dataSearch(30)" size="small" plain>近30日</el-button>
        </el-button-group>
      </div>
      <div class="time-right">
        <span @click="search" class="search">查询</span>
        <span @click="reset" class="reset">重置</span>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="等待交割" name="first">
        <el-table
          v-loading="load1"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          :data="tableData1"
          style="width: 100%"
        >
          <el-table-column prop="orderNo" label="订单号" min-width="150"></el-table-column>
          <el-table-column prop="scontractName" label="合约名称" min-width="100"></el-table-column>
          <el-table-column prop="directionName" label="方向" min-width="50"></el-table-column>
          <el-table-column prop="num" label="购买数量" min-width="100"></el-table-column>
          <el-table-column prop="openPrice" label="开盘价格" min-width="100"></el-table-column>
          <el-table-column prop="createTime" label="下单时间" min-width="150"></el-table-column>
          <el-table-column prop="settleTime" label="开盘时间" min-width="150"></el-table-column>
          <el-table-column prop="delaySeconds" label="秒合约倒计时" min-width="120">
            <template slot-scope="scope">
              {{scope.row.delaySeconds}}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史交割" name="second">
        <el-table
          v-loading="load2"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          :data="tableData2"
          style="width: 100%"
        >
          <el-table-column prop="orderNo" label="订单号" min-width="150"></el-table-column>
          <el-table-column prop="scontractName" label="秒合约名称" min-width="100"></el-table-column>
          <el-table-column prop="directionName" label="方向" min-width="50"></el-table-column>
          <el-table-column prop="num" label="购买数量" min-width="100"></el-table-column>
          <el-table-column prop="profit" label="收益" min-width="100"></el-table-column>
          <el-table-column prop="openPrice" label="开盘价格" min-width="100"></el-table-column>
          <el-table-column prop="createTime" label="开盘时间" min-width="150"></el-table-column>
          <el-table-column prop="openPrice" label="下单价格" min-width="100"></el-table-column>
          <el-table-column prop="settlePrice" label="结算价格" min-width="100"></el-table-column>
          <el-table-column prop="settleTime" label="结算时间" min-width="150"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-pagination
        v-if="activeName=='first'?true:false"
        @current-change="nextPage1"
        style="text-align:center;margin-top:20px;"
        small
        layout="prev, pager, next"
        :total="total1"
        :page-size="8"
      ></el-pagination>
      <el-pagination
        v-else
        @current-change="nextPage2"
        style="text-align:center;margin-top:20px;"
        small
        layout="prev, pager, next"
        :total="total2"
        :page-size="8"
      ></el-pagination>
    </el-tabs>
  </div>
</template>
<script>
import { repositoryList, repositoryHistory } from "../../api/api";
import { mapState } from "vuex";
import qs from "qs";
export default {
  name: "tradingRecord",
  data() {
    return {
      time: "",
      activeName: "first",
      page1: 1,
      page2: 1,
      tableData1: [],
      tableData2: [],
      total1: 1,
      total2: 1,
      load1: false,
      load2: false
    };
  },
  computed: {
    ...mapState(["token"])
  },
  watch: {
    time() {
      // console.log(this.$moment(this.time[0]).format("YYYY-MM-DD  HH:mm:ss"));
    }
  },
  created() {
    this.underway();
    this.completed();
    // console.log(this.$getBeforeDate.getBeforeDate(2));
  },
  methods: {
    underway() {
      this.load1 = true
      if (this.time == "") {
        this.time = [this.$getBeforeDate.getBeforeDate(30), new Date()];
      }
      var params = {
        pageNum: this.page1,
        pageSize: 8,
        token: this.token,
        startTime: this.$moment(this.time[0]).format("YYYY-MM-DD  HH:mm:ss"),
        endTime: this.$moment(this.time[1]).format("YYYY-MM-DD  HH:mm:ss")
      };
      repositoryList(qs.stringify(params)).then(res => {
        this.load1 = false
        this.tableData1 = res.data.data;
        this.total1 = res.data.count;
      });
    },
    completed() {
      this.load2 = true
      if (this.time == "") {
        this.time = [this.$getBeforeDate.getBeforeDate(30), new Date()];
      }

      var params = {
        pageNum: this.page2,
        pageSize: 8,
        token: this.token,
        startTime: this.$moment(this.time[0]).format("YYYY-MM-DD"),
        endTime: this.$moment(this.time[1]).format("YYYY-MM-DD")
      };
      repositoryHistory(qs.stringify(params)).then(res => {
        this.load2 = false
        this.tableData2 = res.data.data;
        this.total2 = res.data.count;
      });
    },
    search() {
      this.underway();
      this.completed();
    },
    dataSearch(val){
      this.time = [this.$getBeforeDate.getBeforeDate(val), new Date()];
      this.underway();
      this.completed();
    },
    reset(){
      this.time = ''
      this.tableData1 = this.tableData2 = []
    },
    //筛选下一页
    nextPage1(val) {
      this.page1 = val;
      this.underway();
    },
    nextPage2(val) {
      this.page2 = val;
      this.completed();
    }
  }
};
</script>
<style lang='less' scope>
#tradingRecord {
  > .title1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > div {
      padding: 0 10px;
      > p:first-child {
        font-size: 15px;
        color: #dcb884;
      }
      > p:last-child {
        font-size: 14px;
        color: #a1b1b0;
        margin-top: 5px;
      }
    }
  }
  .timer {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .time-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > span:first-child {
        font-size: 14px;
        color: #a1b1b0;
        margin-right: 10px;
      }
      //   ----------------------
      .el-button.is-plain:focus,
      .el-button.is-plain:hover {
        border: 1px solid #dcb884;
        color: #dcb884;
      }
    }
    .time-right {
      .search {
        background-image: linear-gradient(to right, #cfa66e, #fbe0b8);
        padding: 8px 25px;
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
      }
      .reset {
        padding: 8px 25px;
        color: #344e50;
        font-size: 12px;
        border-radius: 4px;
        margin-left: 10px;
        border: 1px solid #e6e6e6;
        cursor: pointer;
      }
    }
  }
  //   -----------------------------
  .el-tabs__nav-scroll {
    background-color: #f7f8f8;
  }
  .el-tabs__nav-wrap::after {
    height: 0;
  }
  .el-tabs__active-bar {
    height: 0;
  }
  .el-tabs__item {
    color: #a1b1b0;
    padding: 0 10px;
  }
  .el-tabs__item.is-active {
    color: #dcb884;
  }
  .el-table__empty-text {
    height: 220px;
    padding-top: 150px;
    font-size: 14px;
    background: url("../../assets/img/zanwushuju.png") no-repeat center center;
    background-size: 15%;
  }
}
</style>